<template>
    <div class="performance-title">
        <span @click="store.changeshowProcess">更多</span>
    </div>
    <div class="performance-nav">
        <div class="item " :class="navStatus===0?'active':''" @click="navStatusChange(0)">
            <p class="til">全部</p>
            <p class="co setColor">65件</p>
        </div>
        <div class="item" :class="navStatus===1?'active':''" @click="navStatusChange(1)">
            <p class="til">处置中</p>
            <p class="co setColor">12件</p>
        </div>
        <div class="item" :class="navStatus===2?'active':''" @click="navStatusChange(2)">
            <p class="til">已办结</p>
            <p class="co setColor">53件</p>
        </div>
    </div>
    <div class="performance-title1">
        <div class="tl1">等级</div>
        <div class="tl1">预警级别</div>
        <div class="tl2">噪声类型</div>
        <div class="tl2">噪声位置</div>
        <div class="tl3">发生时间</div>
        <div class="tl3">处置单位</div>
        <div class="tl1">处置状态</div>
    </div>
    <div class="performance-content">
        <div class="item" v-for="(item,index) in newArr" :key="index">
            <div class="tl1">
                <div class="tlactive">{{ item.name }}</div>
            </div>
            <div class="tl1" :class="item['status']==1?'textactive1':item['status']==2?'textactive2':item['status']==3?'textactive3':''">{{ item.ts1 }}</div>
            <div class="tl2">{{ item.ts2 }}</div>
            <div class="tl2 sl2">{{ item.ts3 }}</div>
            <div class="tl3">{{ item.ts4 }}</div>
            <div class="tl3">{{ item.ts5 }}</div>
            <div class="tl1">{{ item.ts6 }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/fengjiepoups'
import { ref,reactive } from 'vue';
const store = useCounterStore()
let list = [
    {name:'高',ts1:'初次',ts2:'建筑施工噪声',ts3:'夔州东路奉节县医院夔州东路奉节',ts4:'2024.06.08 16:08',ts5:'县住房城乡建委',ts6:'已办结',status:1,type:2},
    {name:'高',ts1:'二次',ts2:'建筑施工噪声',ts3:'夔州东路奉节县医院夔州东路奉节',ts4:'2024.06.08 16:08',ts5:'县住房城乡建委',ts6:'已办结',status:2,type:2},
    {name:'高',ts1:'多次',ts2:'建筑施工噪声',ts3:'夔州东路奉节县医院夔州东路奉节',ts4:'2024.06.08 16:08',ts5:'县住房城乡建委',ts6:'处置中',status:3,type:1},
    {name:'高',ts1:'二次',ts2:'建筑施工噪声',ts3:'夔州东路奉节县医院夔州东路奉节',ts4:'2024.06.08 16:08',ts5:'县住房城乡建委',ts6:'已办结',status:2,type:2},
    {name:'高',ts1:'初次',ts2:'建筑施工噪声',ts3:'夔州东路奉节县医院夔州东路奉节',ts4:'2024.06.08 16:08',ts5:'县住房城乡建委',ts6:'处置中',status:1,type:1},
    {name:'高',ts1:'二次',ts2:'建筑施工噪声',ts3:'夔州东路奉节县医院夔州东路奉节',ts4:'2024.06.08 16:08',ts5:'县住房城乡建委',ts6:'已办结',status:2,type:2},
    {name:'高',ts1:'多次',ts2:'建筑施工噪声',ts3:'夔州东路奉节县医院夔州东路奉节',ts4:'2024.06.08 16:08',ts5:'县住房城乡建委',ts6:'处置中',status:3,type:1},
    {name:'高',ts1:'多次',ts2:'建筑施工噪声',ts3:'夔州东路奉节县医院夔州东路奉节',ts4:'2024.06.08 16:08',ts5:'县住房城乡建委',ts6:'处置中',status:3,type:1},
    {name:'高',ts1:'初次',ts2:'建筑施工噪声',ts3:'夔州东路奉节县医院夔州东路奉节',ts4:'2024.06.08 16:08',ts5:'县住房城乡建委',ts6:'已办结',status:1,type:2},
    {name:'高',ts1:'二次',ts2:'建筑施工噪声',ts3:'夔州东路奉节县医院夔州东路奉节',ts4:'2024.06.08 16:08',ts5:'县住房城乡建委',ts6:'已办结',status:2,type:2},
]

let newArr = ref([] as any);
newArr.value = list;

let navStatus = ref(0)
function navStatusChange(type:number) {
    navStatus.value = type
    newArr.value = list.filter((item:any) =>{
        if(type===0){
            return item
        }
        return item.type === type
    } )
}
</script>

<style lang="less" scoped>
.performance-title{
    width: 100%;
    height: 44px;
    margin: 0 0 12px 0;
    background-image: url("../../../assets/fengjie/icon18.png");
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-right: 17px;
    span{
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: #159AFF;
        float: right;
        line-height: 44px;
        cursor: pointer;
    }
}
.performance-nav{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .active{
        width: 164px !important;
        background-image: url("../../../assets/icon20.png") !important;
    }
    .item{
        width: 170px;
        height: 68px;
        background-image: url("../../../assets/icon19.png");
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 0 15px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        cursor: pointer;
        .til{
            width: 100%;
            font-family: PingFangSC-SNaNpxibold;
            font-weight: 600;
            font-size: 14px;
            color: #FFFFFF;
            text-align: center;
        }
        .co{
            width: 100%;
            font-family: PingFangSC-SNaNpxibold;
            font-weight: 600;
            font-size: 15px;
            text-align: center;
        }
    }
}
.performance-title1{
    width: 100%;
    height: 28px;
    background: rgba(2, 49, 100, .2);
    margin-top: 12px;
    box-sizing: border-box;
    padding: 0 0 0 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #159AFF;
    .tl1{
        width: 52px;
    }
    .tl2{
        width: 82px;
    }
    .tl3{
        flex: 90px;
    }
}
/* 隐藏滚动条轨道 */
.performance-content::-webkit-scrollbar {
    display: none; /* 对于Chrome和Safari */
}
.performance-content{
    width: 100%;
    height: 380px;
    overflow-y: scroll;
    .item{
        width: 100%;
        height: 44px;
        margin-bottom: 4px;
        font-family: PingFangSC-SNaNpxibold;
        font-weight: 600;
        font-size: 12px;
        color: #D0DEEE;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 0 0 6px;
        .tl1{
            width: 50px;
        }
        .tl2{
            width: 82px;
        }
        .tl3{
            flex: 90px;
        }
    }
    .tlactive{
        width: 24px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        background: rgba(255, 56, 56, 0.2);
        color: #FF3838;
    }
    .textactive1{
        color: #269D6B !important;
    }
    .textactive2{
        color: #FFC97A !important;
    }
    .textactive3{
        color: #FF3838 !important;
    }
    .item:nth-child(odd){
        background: rgba(71, 138, 138, 0);
        box-shadow: inset 0 -1px 0 0 rgba(108, 128, 151, 0.5);
    }
    .item:nth-child(even){
        background: rgba(71, 107, 138, 0.1);
        box-shadow: inset 0 -1px 0 0 rgba(108, 128, 151, 0.5);
    }
}
</style>